<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/admin.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <!--[if lt IE 9]>
    <script src="__JS__/html5shiv.min.js"></script>
    <script src="__JS__/respond.min.js"></script>
    <style>
        .login .login-form input {
            color: #000;
        }
    </style>
    <![endif]-->

</head>
<body>
<form class="layui-form " id="choice_form" style="margin: 50px" action="${pageContext.request.contextPath}/choice/add"
      method="post">
    <div class="layui-form-item">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">题目内容</label>
            <div class="layui-input-block">
                <textarea name="info" placeholder="请输入内容" required lay-verify="required"
                          class="layui-textarea"></textarea>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">A</label>
        <div class="layui-input-block">
            <input type="text" name="a" required lay-verify="required" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">B</label>
        <div class="layui-input-block">
            <input type="text" name="b" required lay-verify="required" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">C</label>
        <div class="layui-input-block">
            <input id="c" type="text" name="c" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">D</label>
        <div class="layui-input-block">
            <input id="d" type="text" name="d" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">答案</label>
        <div class="layui-input-block">
            <input type="radio" name="answ" value="A" title="A" checked="">
            <input type="radio" name="answ" value="B" title="B">
            <input type="radio" id="answ_c" name="answ" value="C" title="C" >
            <input type="radio" id="answ_d" name="answ" value="D" title="D" >
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">分析</label>
            <div class="layui-input-block">
                <textarea name="analyze" placeholder="请输入题目分析" required lay-verify="required"
                          class="layui-textarea"></textarea>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="add" style="width: 200px">添 加</button>
        </div>
    </div>

</form>

<script>
    var form
    layui.use('form', function () {
        form = layui.form;

        //各种基于事件的操作，下面会有进一步介绍
        form.on('submit(add)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            onAddChoice(data.field);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });

  /*  $('#c').on('keydown', function () {
        setTimeout(function () {
            if ($("#c").val() == "") {
                $("#answ_c").attr("disabled", true);
                form.render('radio');
            } else {
                $("#answ_c").removeAttr("disabled");
                form.render('radio');
            }

        }, 1000);
    });
    $('#d').on('keydown', function () {
        setTimeout(function () {
            if ($("#d").val() == '') {
                $("#answ_d").attr("disabled", true);
                form.render('radio');
            } else {
                $("#answ_d").removeAttr("disabled");
                form.render('radio');
            }
        }, 1000);
    });*/


    function onAddChoice(data) {
        $.ajax(
            {
                type: 'post',
                url: '${pageContext.request.contextPath}/choice/add',
                data: {
                    courseId: '${courseId}',
                    info: data.info,
                    a: data.a,
                    b: data.b,
                    c: data.c,
                    d: data.d,
                    answ: data.answ,
                    analyze:data.analyze
                },
                dataType: 'json',
                success: function (data) {
                    layer.alert(data.message, {
                        skin: 'layui-layer-molv' //样式类名
                        , closeBtn: 0
                    });
                }
            });
        return false;
    }


</script>
</body>
</html>